<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /**
       * 语法： var proxy = new Proxy(target, handler);
       * 1. new Proxy()表示生成一个Proxy实例，
       * 2. target参数表示所要拦截的目标对象，
       * 3. handler参数也是一个对象，用来定制拦截行为。
       */
      var target = { name: "孙悟空", age: 18 };
      var handler = {
       // 拦截对象属性的读取 receiver表示proxy实例本身
        get(target, propKey, receiver) {
          if (propKey === "name") {
            return "Hello," + target[propKey];
          }
        },
        // 拦截对象属性的设置
        set(target, propKey, receiver) {

        }
      };
      let proxy = new Proxy(target, handler)
      console.log(proxy.name) // Hello,孙悟空
      /**
       * 对于可以设置，但是没有设置拦截的操作，则直接落在目标对象上，按照原先的方式产生结果
       * 下面是Proxy支持的拦截操作一览，一共13种。
       * --get(target, propKey, receiver): 拦截对象属性的读取，比如proxy.foo和proxy['foo']。
       * --set(target, propKey, value, receiver): 拦截对象属性的设置，比如proxy.foo = v
       * 或者proxy['foo'] = v, 返回一个布尔值。
       * --has(target, propKey): 拦截propKey in proxy的操作，返回一个布尔值。
       * --deleteProperty(target, propKey): 拦截delete proxy[propKey]的操作，返回一个布尔值。
       * --ownKeys(target): 拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、
       * for ... in 循环，返回一个数组，该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性
       * --getOwnPropertyDescriptor(target, propKey): 拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
       * --defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
       * --apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
       * --construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。
       */
    </script>
  </body>
</html>
